<template>
  <div class="admin-layout">
    <aside class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <div class="logo">
        <img src="@/assets/logo.png" alt="Logo" class="logo-img" v-if="!isCollapsed">
        <h2 v-if="!isCollapsed">药店管理系统</h2>
        <i class="fas fa-pills logo-icon" v-else></i>
      </div>
      <button class="collapse-btn" @click="toggleSidebar">
        <i :class="['fas', isCollapsed ? 'fa-angle-right' : 'fa-angle-left']"></i>
      </button>
      <nav class="nav-menu">
        <router-link to="/admin/dashboard" class="nav-item" active-class="active">
          <i class="fas fa-chart-line"></i>
          <span v-if="!isCollapsed">数据概览</span>
        </router-link>
        <router-link to="/admin/drugs" class="nav-item" active-class="active">
          <i class="fas fa-pills"></i>
          <span v-if="!isCollapsed">药品管理</span>
        </router-link>
        <router-link to="/admin/orders" class="nav-item" active-class="active">
          <i class="fas fa-shopping-cart"></i>
          <span v-if="!isCollapsed">订单管理</span>
        </router-link>
        <router-link to="/admin/users" class="nav-item" active-class="active">
          <i class="fas fa-users"></i>
          <span v-if="!isCollapsed">用户管理</span>
        </router-link>
      </nav>
    </aside>
    
    <main class="main-content">
      <header class="top-bar">
        <div class="breadcrumb">
          <i class="fas fa-home"></i>
          <span>{{ currentRoute }}</span>
        </div>
        <div class="user-info">
          <div class="user-avatar">
            <i class="fas fa-user-circle"></i>
          </div>
          <div class="user-details">
            <span class="username">{{ adminName }}</span>
            <span class="role">管理员</span>
          </div>
          <button @click="handleLogout" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i>
            <span>退出</span>
          </button>
        </div>
      </header>
      
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

export default {
  name: 'AdminLayout',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const adminName = ref('');
    const isCollapsed = ref(false);

    const currentRoute = computed(() => {
      const routeMap = {
        'AdminDashboard': '数据概览',
        'DrugManagement': '药品管理',
        'OrderManagement': '订单管理',
        'UserManagement': '用户管理',
        'Statistics': '销售统计'
      };
      return routeMap[route.name] || '仪表板';
    });

    onMounted(() => {
      const user = JSON.parse(localStorage.getItem('user') || '{}');
      adminName.value = user.username || '管理员';
    });

    const handleLogout = () => {
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      router.push('/');
    };

    const toggleSidebar = () => {
      isCollapsed.value = !isCollapsed.value;
    };

    return {
      adminName,
      handleLogout,
      isCollapsed,
      toggleSidebar,
      currentRoute
    };
  }
};
</script>

<style scoped>
.admin-layout {
  display: flex;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.sidebar {
  width: 250px;
  background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
  color: white;
  padding: 1rem;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
  width: 80px;
}

.logo {
  padding: 1.5rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.logo-img {
  width: 40px;
  height: 40px;
}

.logo-icon {
  font-size: 2rem;
  color: #42b983;
}

.logo h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.collapse-btn {
  position: absolute;
  top: 1rem;
  right: -12px;
  width: 24px;
  height: 24px;
  background: #42b983;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.collapse-btn:hover {
  background: #3aa876;
  transform: scale(1.1);
}

.nav-menu {
  margin-top: 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(5px);
}

.nav-item.active {
  background: #42b983;
  color: white;
}

.nav-item i {
  margin-right: 1rem;
  width: 20px;
  text-align: center;
  font-size: 1.2rem;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2c3e50;
  font-size: 1.1rem;
}

.breadcrumb i {
  color: #42b983;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #2c3e50;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: #2c3e50;
}

.role {
  font-size: 0.8rem;
  color: #6c757d;
}

.logout-btn {
  padding: 0.5rem 1rem;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
}

.content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    height: 100vh;
    z-index: 1000;
    transform: translateX(0);
  }

  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .main-content {
    margin-left: 0;
  }

  .user-details {
    display: none;
  }
}
</style> 